<template>
  <a-modal v-model="visible" title="排休日历" :width="1200" :footer="null" @cancel="$emit('update:visible', false)">
    <div>
      <div style="display:flex;justify-content:space-between">
        <div>
          <a-month-picker :allowClear="false" placeholder="请选择月份" v-model="dynamicDate" @change="onMonthChange" />
        </div>
        <div>
          <a-button @click="dateChange(1)"><a-icon type="left"/></a-button>
          <a-button type="link" @click="goBack">返回今天</a-button><a-button @click="dateChange(2)"><a-icon type="right"/></a-button>
        </div>
        <!-- <a-button type="primary" @click="synchronous">同步</a-button> -->
      </div>
      <div style="display:flex; justify-content: flex-start; margin-top:20px;">
        <div v-for="(item, index) in weekList" :key="index" style="width:100%">
          <div style="height:45px;background:#F4F6FA;font-size:14px;color:#252525;line-height:45px;text-align:center;">
            {{ item }}
          </div>
        </div>
      </div>
      <a-spin :spinning="loading">
        <div style="display:flex; flex-wrap:wrap; margin-top:10px;width:100%;">
          <div v-for="(item, index) in dateList" :key="index" style="width:14.285%;margin-right:-1px;margin-bottom:-1px;">
            <div
              @mouseover="mouseover(item, index)"
              @mouseleave="mouseleave(item, index)"
              class="datebox"
              style="background:#FFFFFF;height:88px;border:1px solid #E8E8E8;font-weight:500;font-size:22px;color:#3C3D43;position:relative;"
            >
              <div>
                <img
                  v-if="item.dateType === 1 && item.dateType !== item.initDateType"
                  src="@/assets/icons/rest.png"
                  style="width:22px;height:22px;position:absolute;top:0;right:0"
                />
                <img
                  v-if="item.dateType === 2 && item.dateType !== item.initDateType"
                  src="@/assets/icons/normal.png"
                  style="width:22px;height:22px;position:absolute;top:0;right:0"
                />
              </div>
              <div
                :style="item.style"
                style="position: absolute;top:42px;left:17px;width:35px;height:18px;font-size:10px;color:#FFFFFF;border-radius: 1px;text-align:center;line-height:18px"
              >
                <div v-if="item.initDateType === 1">
                  休息日
                </div>
                <div v-if="item.initDateType === 2">
                  工作日
                </div>
                <div v-if="item.initDateType === 3">
                  公假日
                </div>
              </div>
              <!-- <div v-if="item.hover && item.day" @mouseover="mouseover2(item, index)" @mouseleave="mouseleave2(item, index)">
                <a-icon class="iconStyle" @click.stop type="ellipsis" style="position: absolute;top:6px;right:11px;" />
                <div class="machine-status-menu" v-if="item.hover2">
                  <div v-if="item.dateType === 1 || item.dateType === 3" class="editHoverStyle" @click="editTypeChange(item)">
                    切换为工作日
                  </div>
                  <div v-if="item.dateType === 2 || item.dateType === 3" class="editHoverStyle" @click="editTypeChange(item)">
                    切换为休息日
                  </div>
                </div>
              </div> -->
              <div v-if="item.date === moment().format('YYYY-MM-DD')" class="now" style="margin-top:8px;margin-left:15px">
                {{ item.day }}
              </div>
              <div
                v-else-if="item.month === parseInt(moment(dynamicDate).format('MM'))"
                style="margin-top:8px;margin-left:15px"
                :style="item.dateType === 3 ? 'color:#FFA600' : null"
              >
                {{ item.day }}
              </div>
              <div v-else style="margin-top:8px;margin-left:15px;color:#A6A8B4">{{ item.day }}</div>
            </div>
          </div>
        </div>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import { getCalendar, synchronous, editType } from "./api";
import moment from "moment";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      siteId: null,
      loading: false,
      dynamicDate: moment(moment().format("YYYY-MM"), "YYYY-MM"),
      weekList: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
      dateList: []
    };
  },
  created() {
    if (localStorage.getItem("siteId")) {
      this.siteId = localStorage.getItem("siteId");
    }
    this.getCalendarList();
  },
  methods: {
    dateChange(e) {
      if (e === 1) {
        this.dynamicDate = moment(this.dynamicDate).subtract(1, "months");
        this.getCalendarList();
      }
      if (e === 2) {
        this.dynamicDate = moment(this.dynamicDate).subtract(-1, "months");
        this.getCalendarList();
      }
    },
    // 更改休假上班
    editTypeChange(item) {
      editType({
        date: item.date,
        dateType: item.dateType === 1 ? 2 : 1,
        siteId: this.siteId
      })
        .then(res => {
          this.$message.success("切换成功");
          this.getCalendarList();
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    mouseover(item, index) {
      this.$set(this.dateList, index, {
        ...this.dateList[index],
        hover: true
      });
    },
    mouseleave(item, index) {
      this.$set(this.dateList, index, {
        ...this.dateList[index],
        hover: false
      });
    },
    mouseover2(item, index) {
      this.$set(this.dateList, index, {
        ...this.dateList[index],
        hover2: true
      });
    },
    mouseleave2(item, index) {
      this.$set(this.dateList, index, {
        ...this.dateList[index],
        hover2: false
      });
    },
    // 同步
    synchronous() {
      synchronous({
        year: parseInt(moment().format("YYYY"))
      })
        .then(res => {
          this.$message.success("同步成功");
          this.getCalendarList();
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    // 返回今天
    goBack() {
      this.dynamicDate = moment(moment().format("YYYY-MM"), "YYYY-MM");
      this.getCalendarList();
    },
    // 选择月份变化
    onMonthChange() {
      this.getCalendarList();
    },
    // 查询的
    getCalendarList() {
      this.loading = true;
      getCalendar({
        month: moment(this.dynamicDate).format("MM"),
        year: moment(this.dynamicDate).format("YYYY"),
        siteId: this.siteId,
        "orders[0].desc": false,
        "orders[0].property": "date"
      })
        .then(res => {
          this.loading = false;
          this.dateList = JSON.parse(JSON.stringify(res.data));
          if (moment(this.dateList[0].date).day() !== 1) {
            const num = moment(this.dateList[0].date).day() - 1;
            for (var i = 0; i < num; i++) {
              this.dateList.unshift({});
            }
          }

          if (moment(this.dateList[this.dateList.length - 1].date).day() !== 0) {
            const num = 7 - moment(this.dateList[this.dateList.length - 1].date).day();
            for (var o = 0; o < num; o++) {
              this.dateList.push({});
            }
          }
          this.dateList.forEach((item, index) => {
            if (item.initDateType === 1 && item.month === parseInt(moment(this.dynamicDate).format("MM"))) {
              item.style = "background:#24CDAA";
            }
            if (item.initDateType === 1 && item.month !== parseInt(moment(this.dynamicDate).format("MM"))) {
              item.style = "background:#24CDAA; opacity: 0.5;";
            }
            if (item.initDateType === 2 && item.month === parseInt(moment(this.dynamicDate).format("MM"))) {
              item.style = "background:#C0C0C0";
            }
            if (item.initDateType === 2 && item.month !== parseInt(moment(this.dynamicDate).format("MM"))) {
              item.style = "background:#C0C0C0; opacity: 0.5;";
            }
            if (item.initDateType === 3 && item.month === parseInt(moment(this.dynamicDate).format("MM"))) {
              item.style = "background:#FFA600";
            }
            if (item.initDateType === 3 && item.month !== parseInt(moment(this.dynamicDate).format("MM"))) {
              item.style = "background:#FFA600; opacity: 0.5;";
            }
          });
          this.dateList.forEach((item, index) => {
            item.hover = false;
          });
        })
        .catch(err => {
          console.log("debug log --> ", err);
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.iconStyle {
  color: var(--primary);
}
.editHoverStyle:hover {
  background: var(--primary10);
  color: var(--primary);
}
.contentBox {
  padding: 24px;
}
.datebox:hover {
  z-index: 1;
  transform: scale(1.2); // 放大1.2倍
  transition: all 0.3s; // 设置加载时间
  box-shadow: 0px 4px 12px 0px rgba(106, 102, 246, 0.2);
}
.now {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: var(--primary);
  line-height: 32px;
  text-align: center;
  color: #fff;
}
.machine-status-menu {
  cursor: pointer;
  position: absolute;
  top: 24px;
  right: 5px;
  background: #fff;
  width: 80px;
  border-radius: 4px;
  // border: 1px solid #d9d9d9;
  box-shadow: 0px 0px 4px #e0e0e0;
  font-size: 10px;
  .editHoverStyle {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
